ColdBox 7 dropped just over a month ago, and as part of those updates, the ColdBox Application Templates have also been updated. If you didn't know already, there are a handful of application templates that you can use to get up and running with ColdBox quickly.

Here is a listing of the latest supported templates:

Default - The default ColdBox application template.

Elixir - The default template with ColdBox Elixir support for asset pipelines

Modern - A fresh new approach to ColdBox applications that are non-root based. *experimental

REST - A base REST API using ColdBox

REST HMVC - An HMVC REST API using modules

Super Simple - Barebones conventions.

Using Templates

If you have CommandBox installed, you can create a new ColdBox application using the default application template with the following command:

box
> mkdir myapp --cd
> coldbox create app

Once the commands finishes, you will find a folder with all of the folders and files from the default application template: https://github.com/coldbox-templates/default

CommandBox:myapp> ls
 <DIR>   .vscode/
 <DIR>   build/
 <DIR>   coldbox/
 <DIR>   config/
 <DIR>   handlers/
 <DIR>   includes/
 <DIR>   interceptors/
 <DIR>   layouts/
 <DIR>   lib/
 <DIR>   models/
 <DIR>   modules_app/
 <DIR>   testbox/
 <DIR>   tests/
 <DIR>   views/
6.0 KB   .DS_Store
1.2 KB   .cfconfig.json
2.4 KB   .cfformat.json
1.6 KB   .cflintrc
0.1 KB   .dockerignore
0.3 KB   .editorconfig
0.6 KB   .env
0.6 KB   .env.example
0.5 KB   .gitattributes
0.3 KB   .gitignore
0.2 KB   .markdownlint.json
4.0 KB   Application.cfc
1.6 KB   box.json
1.1 KB   favicon.ico
0.4 KB   index.cfm
5.8 KB   readme.md
0.5 KB   robots.txt
0.1 KB   server.json

We can specify a skeleton argument if we want to create a ColdBox application using a different template other than the default.

> coldbox create app skeleton=rest
> coldbox create app skeleton=SuperSimple

The command above will install the REST API or SuperSimple application templates into the current folder. The skeleton argument can accept the name of the template, as well as any valid ForgeBox Endpoint ID, which can include a Git repo or HTTP URL pointing to a package.

> coldbox create app skeleton=http://site.com/myCustomAppTemplate.zip

Elixir Template

One of my favorite templates to use is the Elixir template. If you are working heavily with JavaScript and any frontend JavaScript frameworks such as VueJS or React, this template has everything you need to get up and running in a few minutes.

> coldbox create app skeleton=Elixir

ColdBox Elixir makes working with Webpack much easier. Let's take a look.

In the ROOT of your application, you should now find a webpack.config.js file.

const elixir 	= require( "coldbox-elixir" );
const webpack 	= require( "webpack" );

elixir.config.mergeConfig({
    plugins: [
        // globally scoped items which need to be available in all templates
        new webpack.ProvidePlugin({
			// $              : "jquery",
			// jQuery         : "jquery",
			// "window.jQuery": "jquery",
			// "window.$"     : "jquery",
            // "Vue"          : ["vue/dist/vue.esm.js", "default"],
            // "window.Vue"   : ["vue/dist/vue.esm.js", "default"]
        })
    ]
});

/*
 |--------------------------------------------------------------------------
 | Elixir Asset Management
 |--------------------------------------------------------------------------
 |
 | Elixir provides a clean, fluent API for defining some basic Gulp tasks
 | for your ColdBox application. By default, we are compiling the Sass
 | file for our application, as well as publishing vendor resources.
 |
 */

module.exports = elixir( mix => {

	// Mix App styles
	mix
		.js( "App.js" )
		.sass( "App.scss" );

} );

Our JavaScript and SASS assets ( by convention ) can be found in the resources folder and this is where you would place your code for the app.

CommandBox:myapp> ls resources/assets/js/
0.0 KB   .gitkeep
0.2 KB   App.js

CommandBox:myapp> ls resources/assets/sass/
May 19,2023  21:05:  38   H         0.0 KB   .gitkeep
May 19,2023  21:05:  38             0.3 KB   App.scss

To get Elixir to compile our assets down, we just need to make sure we have Node and NPM installed, and run the following.

npm install
npm run dev
npm run watch # if you want to use the watcher

If everything ran successfully, you'll see an output similar to this:

+ webpack@5.87.0
added 41 packages from 29 contributors and audited 548 packages in 8.813s

64 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

  build [=         ] 10%Browserslist: caniuse-lite is outdated. Please run:
  npx update-browserslist-db@latest
  Why you should do it regularly: https://github.com/browserslist/update-db#readme
  build [========= ] 93%(node:91150) [DEP_WEB

The JavaScript and CSS assets are placed by convention in the includes folder.

If you look layouts/Main.cfm file, you will find this in the HTML header:

<link href="#html.elixirPath( "css/App.css" )#" rel="stylesheet">

This will include a reference to the includes folder where your CSS is compiled down automatically.

<link href="/includes/css/App.css" rel="stylesheet">

Covering the features of Elixir are outside of scope of this posting, but by using #html.elixirPath#, you can take advantage of Elixir's Asset Versioning, where a unique file name is created anytime your CSS or JavaScript changes - therefore allowing you to cache your assets and force your application users to download a new file only when changes are made.

Summary

What I love most about these templates is just the amount of time they save me. With a few commands, you can have all the folders and files scaffolded out for you and get straight to developing your next great idea.

Be on the lookout for additional templates as more are being added over time.

You can find the latest Application templates currently available on Github: https://github.com/coldbox-templates